<template>
  <div class="box1">
    <el-row :gutter="10" style="margin-bottom: 60px">
      <el-col :span="6">
        <el-card style="color: #409eff">
          <div><i class="el-icon-user-solid" /> 用户总数</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ info.userCount }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #f56c6c">
          <div><i class="el-icon-money" /> 今日订单量</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ info.orders }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67c23a">
          <div><i class="el-icon-bank-card" /> 今日收益总额</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            ￥ {{ info.sells }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #e6a23c">
          <div><i class="el-icon-s-shop" /> 在售藏品总数</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ info.antiqueCount }}
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="box2">
      <div class="left" ref="main1"></div>
      <div class="right" ref="main2"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ref } from "vue";
import ShopCheApi from "@/api/order/ShopCheApi";

export default {
  name: "Index",
  data() {
    return {
      info: {
        userCount: 10,
        orders: 20,
        sells: 100,
        antiqueCount: 2,
      },
      antiques: [
        { value: 1048, name: "猪猪" },
      ],
      sells: [15, 23, 22, 21, 13, 14, 26]
    };
  },
  mounted() {
    this.queryAll();
    this.sellsAll();
    window.setTimeout(() => {
      this.initCharts1();
      this.initCharts2();
    }, 1000);
  },
  created() {},
  methods: {
    initCharts1() {
      var myChart = echarts.init(this.$refs.main1);
      var option1;
      // 折线图
      option1 = {
        title: {
          text: "前七天每日收益图",
          subtext: "数据",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: [
            "前一天",
            "前二天",
            "前三天",
            "前四天",
            "前五天",
            "前六天",
            "前七天",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.sells,
            type: "line",
          },
        ],
      };
      myChart.setOption(option1);
    },
    initCharts2() {
      var myChart = echarts.init(this.$refs.main2);
      var option2;
      // 圆饼图
      option2 = {
        title: {
          text: "在售藏品数量图",
          subtext: "数据",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "藏品数量",
            type: "pie",
            radius: "50%",
            data: this.antiques,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option2);
    },
    queryAll() {
      ShopCheApi.queryAll().then((res) => {
        // console.log(res.data.data.antiques.length)
        this.info = res.data.data;

        var tt = res.data.data.antiques;
        var aa = [];
        for (var i = 0; i < tt.length; i++) {
          aa.push({ value: tt[i].count, name: tt[i].name });
        }
        console.log(aa);
        this.antiques = aa;
      });
    },

    sellsAll(){
      ShopCheApi.sellsAll().then((res) => {
        console.log(res.data.data)
        this.sells=res.data.data
      })
    }
  },
};
</script>

<style scoped>
.box1 {
  position: relative;
  top: 5%;
}
.box2 {
  width: 1500px;
  height: 600px;
  position: relative;
  margin: 0 auto;
  top: 4%;
  /* background-color: blanchedalmond; */
}
.left {
  width: 600px;
  height: 600px;
  /* background-color: blanchedalmond; */
  float: left;
  left: 5%;
  position: relative;
}
.right {
  width: 600px;
  height: 600px;
  /* background-color: rgb(124, 118, 136); */
  float: left;
  margin-left: 300px;
  position: relative;
}
</style>
